<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div *ngIf="datasource" [ngClass]="{'ddp-type': !hasHeader}" class="ddp-box-grid-detail" >

  <a (click)="closeBtn();" href="javascript:" class="ddp-btn-close-s" ></a>

  <!-- 제목 영역 -->
  <div class="ddp-data-detailinfo">
    <span class="ddp-data-name">{{datasource.name}}</span>
    <div *ngIf="isEnabled && !isChangeDsMode" (click)="isShowDataPreview = true" class="ddp-ui-detail">
      <em class="ddp-icon-detail"></em>
      <div class="ddp-ui-tooltip-info">
        <em class="ddp-icon-view-top"></em> {{ 'msg.comm.detail.details' | translate }}
      </div>
    </div>
  </div>
  <!-- // 제목 영역 -->

  <!-- 데이터소스 상세 영역 -->
  <div class="ddp-wrap-datadetail">

    <table class="ddp-dl-detail">
      <colgroup>
        <col width="120px">
        <col width="*">
      </colgroup>
      <tbody>
      <tr *ngIf="showMetadataName">
        <th> {{ 'msg.comm.detail.metadata-name' | translate }} </th>
        <td> {{ metadata?.name }} </td>
      </tr>
      <tr>
        <th> {{ 'msg.comm.detail.desc' | translate }} </th>
        <td>
          <div class="ddp-data-det" title="{{ ( metadata && metadata.description ) ? metadata.description : datasource.description }}"> {{ ( metadata && metadata.description ) ? metadata.description : datasource.description }} </div>
        </td>
      </tr>
      <tr>
        <th> {{'msg.comm.detail.type' | translate}} </th>
        <td> {{datasource.connType.toString() === 'ENGINE' ? ('msg.comm.ui.list.ds.type.engine' | translate) : ('msg.comm.ui.list.ds.type.link' | translate)}} </td>
      </tr>
      <tr>
        <th> {{'msg.comm.detail.published' | translate}} </th>
        <td> {{ datasource.published ? ('msg.comm.name.public' | translate) : ('msg.comm.name.private' | translate) }} </td>
      </tr>
      <tr>
        <th> {{'msg.comm.detail.created' | translate}} </th>
        <td> {{datasource.createdTime | mdate:'YYYY-MM-DD'}} </td>
      </tr>
      <tr *ngIf="isEnabled && datasource.summary">
        <th> {{'msg.comm.detail.size' | translate}} </th>
        <td> {{datasource.summary.size | fileSize:2}} </td>
      </tr>
      <tr *ngIf="isEnabled && datasource.summary" >
        <th> {{'msg.comm.detail.rows' | translate}} </th>
        <td> {{datasource.summary.count | numberCommas}} </td>
      </tr>
      </tbody>
    </table>

  </div>
  <!-- // 데이터소스 상세 영역 -->

  <!-- 필드 목록 영역 -->
  <div *ngIf="isEnabled" class="ddp-data-listview">

    <table class="ddp-table-listview">
      <colgroup>
        <col width="30%"/>
        <col width="10%"/>
        <col width="*"/>
      </colgroup>
      <tbody>
      <tr *ngFor="let item of datasource.fields">
        <td class="ddp-txt-center">
          <span class="ddp-box-tag-value"
                [class.ddp-measure]="item.role.toString() == 'MEASURE'"
                [class.ddp-dimension]="item.role.toString() != 'MEASURE'">{{item.role.toString() == 'MEASURE' ? ('msg.comm.name.mea' | translate) : ('msg.comm.name.dim' | translate)}}</span>
        </td>
        <td class="ddp-txt-center">
          <em ngClass="{{getIconClass(item.logicalType)}}"></em>
        </td>
        <td>
          {{item.logicalName}}
        </td>
      </tr>
      </tbody>
    </table>

  </div>
  <!-- // 필드 목록 영역 -->

</div>

<!-- 데이터 미리보기 -->
<data-preview *ngIf="isShowDataPreview && !isChangeDsMode" [source]="datasource" (close)="isShowDataPreview=false"></data-preview>
